{layout name="common/layout" /}
<div class="bj_hui">
    <div class="zx_me">
        <div class="zx_me1">我要咨询</div>
        <form action="/addons/shop/inquiry/inquiryaddsum" method="post">
            <div class="zx_me2">
                <p>咨询问题</p><input type="text" name="title" placeholder="问题" class="rh_tx_zx1"/>
            </div>
            <div class="zx_me2">
                <p>问题描述</p>
                <textarea name="info" class="rh_tx_zx2" placeholder="描述"></textarea>
            </div>
            <div class="zx_me2">
                <input multiple type="file" name="file" style="display: none;" onchange="changeFile(this)">
                <div style="margin-bottom: 10px;">
                    <div id="images"></div>
                </div>
                <a href="#" onclick="clickFile()">选择图片</a>
                <b>支持JPG、JPEG、GIF、 PNG 、BMP格式图片，图片大小不能超过5M</b>
            </div>
            <!--<div class="zx_me3" style="width: auto;">
              <a href="javascript:;" class="md-trigger btn btn-primary btn-sm" data-modal="modal-1"
                style="background:white;border:0;">
                <span>赏</span>
                <p>咨询打赏</p>
              </a>
            </div>-->
            <div class="zx_me4"><input onclick="submitMsg()" type="button" value="提交咨询" class="rh_tx_zx3"/></div>
        </form>
    </div>
</div>


<div class="md-modal md-effect-1" id="modal-1">
    <div class="md-content">
        <h3>咨询打赏</h3>
        <form action="/addons/shop/inquiry/reward" method="post">
            <input type="hidden" name="problem_id">
            <input type="hidden" name="method" value="web">
            <h6><input type="text" name="reward_money" value="" class="rh_tx_zx_s"/>元</h6>
            <h6><input type="submit" value="支付" class="rh_tx_zx_ss"/></h6>
        </form>
        <div>
            <button class="md-close btn-sm btn-primary"><img src="__CDN__/assets/img/img/guanbi.png" width="16"
                                                             height="16"/></button>
        </div>
    </div>
</div>
<div class="md-overlay"></div>
<link href="__CDN__/assets/css/css/component.css" rel="stylesheet">
<script src="__CDN__/assets/js/js/classie.js"></script>
<script src="__CDN__/assets/js/js/modalEffects.js"></script>
<script>
    function clickFile() {
        $("input[name=file]").click()
    }

    function changeFile() {
        const files = $("[name=file]")[0].files
        const formData = new FormData();
        for (let i = 0; i < files.length; i++) {
            formData.append('vv[]', files[i]);
        }
        $.ajax({
            type: 'post',
            url: '/api/vv/upload',
            data: formData,
            processData: false,
            contentType: false,
            xhrFields: {
                withCredentials: true
            },
            success: (res) => {
                if (res.code === 0) {
                    return layer.msg(res.msg)
                }
                let images = document.querySelector('#images')
                res.data.map(function (url) {
                    let img = document.createElement('img')
                    img.setAttribute('src', url)
                    img.style.setProperty('width', '200px')
                    img.style.setProperty('height', '200px')
                    img.style.setProperty('margin', '5px')
                    images.appendChild(img)
                })
            }
        })
    }

    function submitMsg() {
        let images = []
        $("#images").children().each(function (k, v) {
            images.push(v.getAttribute('src'))
        })
        let imgs = images.toString()
        const title = $("input[name=title]").val()
        const info = $("textarea[name=info]").val()
        if (!title) return thisAlert("请输入咨询问题")
        if (!info) return thisAlert("问题描述")
        SHOP.api.ajax({
            url: "/addons/shop/inquiry/inquiryAdd",
            data: {title, info, imgs}
        }, function (data) {
            thisAlert("提交成功")
            $("input[name=title]").val("")
            $("textarea[name=info]").val("")
        }, function (data, ret) {
            if (ret.msg.indexOf("请登录") > -1) {
                layer.alert("请登录后再进行操作", {
                    title: "温馨提示", icon: 0, btn: ["去登录"]
                });
                return false;
            }
        });
    }

    function thisAlert(text) {
        layer.alert(text, {
            title: "提示", icon: 0, btn: ["确定"]
        });
    }
</script>
